<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-common-layout">
      <div class="JNPF-preview-main">
        <el-page-header @back="goBack" content="资产处置" style="font-size: 8px!important;"/>
        <el-row :gutter="15" class="">
          <el-form ref="elForm" :model="dataForm" size="medium" label-width="100px" label-position="right"
                   style="margin-top: 50px"
          >
            <template v-if="!loading">
              <el-col :span="24">
                <el-col :span="8">
                  <el-form-item label="处置标题"
                                prop="disposalTitle"
                  >
                    <el-input v-model="dataForm.disposalTitle"
                              placeholder="请输入" clearable :style='{"width":"100%"}'
                    >

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="处置方式"
                                prop="disposalMethod"
                  >
                    <el-select v-model="dataForm.disposalMethod"
                               placeholder="请选择" clearable :style='{"width":"100%"}'
                    >
                      <el-option v-for="(item, index) in disposalMethodOptions" :key="index" :label="item.fullName"
                                 :value="item.id" :disabled="item.disabled"
                      ></el-option>

                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
<!--                  <el-form-item label="开始处置日期"-->
<!--                                prop="startTime"-->
<!--                  >-->
<!--                    <el-time-picker v-model="dataForm.startTime"-->
<!--                                    placeholder="请选择" clearable :style='{"width":"100%"}' format="HH:mm:ss"-->
<!--                                    value-format="HH:mm:ss" :picker-options='{"selectableRange":"00:00:00-23:59:59"}'-->
<!--                    >-->

<!--                    </el-time-picker>-->
<!--                  </el-form-item>-->
                  <el-form-item label="开始处置日期" prop="startTime">
                    <el-date-picker
                      v-model="dataForm.startTime"
                      type="date"
                      placeholder="请选择日期"
                      clearable
                      :style='{"width":"100%"}'
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="经办人"
                                prop="handledBy"
                  >
                    <el-input v-model="dataForm.handledBy"
                              placeholder="请输入" clearable :style='{"width":"100%"}'
                    >

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="处置单位"
                                prop="disposalUnit"
                  >
                    <el-select v-model="dataForm.disposalUnit"
                               placeholder="请选择" clearable :style='{"width":"100%"}'
                    >
                      <el-option v-for="(item, index) in disposalUnitOptions" :key="index" :label="item.fullName"
                                 :value="item.id" :disabled="item.disabled"
                      ></el-option>

                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="批准文号"
                                prop="disposalInstructions">
                    <el-input v-model="dataForm.approvalNumber"
                              placeholder="请输入" :style='{"width":"100%"}' true
                              :autosize='{"minRows":4,"maxRows":4}'>

                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="处置说明"
                                prop="disposalInstructions"
                  >
                    <el-input v-model="dataForm.disposalInstructions"
                              placeholder="请输入" :style='{"width":"100%"}' true type="textarea"
                              :autosize='{"minRows":4,"maxRows":4}'
                    >

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="附件"
                                prop="disposalInstructions">
                    <JNPF-UploadFz v-model="dataForm.approvalFile"
                                   :fileSize="10"  sizeUnit="MB" :limit="9"
                                   buttonText="上传附件">

                    </JNPF-UploadFz>
                  </el-form-item>
                </el-col>
<!--                {{ dataForm.disposalAssets }}-->
                <div style="width: 100%;height: 40px;background-color: white;width: 108%;">
                  <Popup @addList="handleAddList" v-model="dataForm.disposalAssets"
                         placeholder="请选择" clearable field="zcName" interfaceId="612769091110831365"
                         :columnOptions="zcglInfo" propsValue="id" relationField="zcname"
                         popupType="dialog"
                         popupTitle="选择资产" popupWidth="800px"
                         hasPage :pageSize="20"
                  >
                  </Popup>
                  <template>
                    <div>
                      <el-table border :data="zcglInfoList" size="mini">
                        <el-table-column type="index" width="50" label="序号" align="center"/>
<!--                          -->
                        <el-table-column prop="thingName" label="资产名称">
                          <template slot-scope="scope">
                            <span>{{ scope.row.zcname }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column prop="thingPrice" label="资产代码">
                          <template slot-scope="scope">
                            <span>{{ scope.row.zcnumber }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column prop="thingCount" label="资产标签">
                          <template slot-scope="scope">
                            <span>{{ scope.row.zclabel }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column prop="thingCount" label="资产地址">
                          <template slot-scope="scope">
                            <span>{{ scope.row.address }}</span>
                          </template>
                        </el-table-column>



                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button size="mini" type="text" class="JNPF-table-delBtn"
                                       @click="deleteZcInfo(scope.$index)"
                            >
                              删除
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </template>
                </div>
              </el-col>

            </template>
          </el-form>
          <!-- 固定在底部的按钮列 -->
          <div class="fixed-bottom">
            <button class="confirm-button" @click="goBack">返回</button>
            <button class="confirm-button" @click="handleConfirm">保存</button>
          </div>
        </el-row>


      </div>
    </div>

  </transition>
</template>
<script>
import request from '@/utils/request'
import PrintBrowse from '@/components/PrintBrowse'
import jnpf from '@/utils/jnpf'
import Popup from './PopupSelect'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'

export default {
  components: { PrintBrowse, Popup },
  props: [],
  data() {
    return {
      disposalMethodOptions: [],
      disposalUnitOptions: [],
      zcglInfo: [

        {
        value: 'zcname',
        label: '资产名称'
      }
        , {
          value: 'zclabel',
          label: '资产标签'
        }
        ,
        {
          value: 'zcnumber',
          label: '资产编码'
        },

        {
          value: 'address',
          label: '地址'
        }
      ],
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: '',
      zcglInfoList: [],
      dataForm: {
        id: '',
        disposalTitle: '',
        disposalMethod: '',
        startTime: '',
        handledBy: '',
        disposalUnit: '',
        disposalInstructions: '',
        reasonDisposal: ''
      }

    }
  },
  computed: {},
  watch: {},
  created() {
    this.getdisposalMethodOptions()
    this.getdisposalUnitOptions()
  },
  mounted() {
  },
  methods: {
    handleConfirm(){
      this.dataForm.disposalAssets = this.zcglInfoList.map(item => item.id).join(',');
      request({
        url: '/api/example/ZcglZccz/',
        data:this.dataForm,
        method: 'post'
      }).then(res => {
        this.$message({
          message: res.msg,
          type: 'success',
          duration: 1000,
          onClose: () => {
            this.$emit('refresh', true)
          }
        })
      })


    },
    deleteZcInfo(index) {
      this.$confirm('此操作删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.zcglInfoList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleAddList(checkedRow) {
      // 接收子组件传递的 checkedRow 数据
      this.zcglInfoList = checkedRow
      // 你可以在这里处理接收到的数据
    },
    getdisposalMethodOptions() {
      getDictionaryDataSelector('511111111111111111').then(res => {
        this.disposalMethodOptions = res.data.list
      })
    },
    getdisposalUnitOptions() {
      getDictionaryDataSelector('511111111111111112').then(res => {
        this.disposalUnitOptions = res.data.list
      })
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      this.dataForm = _dataAll
    },
    goBack(isRefresh) {
      this.$emit('close', isRefresh)
      // this.$router.push(`/zcgl/zcglcwbill/index?id=${this.id}`)
    },
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/example/ZcglZccz/detail/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        }

      })
    }
  }
}

</script>
<style scoped>
/* 增加表格行高 */
/deep/ .el-table .el-table__row {
  height: 60px; /* 你想要的行高 */
  border: 1px slategrey solid;
  color: black;
}

/* 如果你还想要调整单元格内部的垂直居中 */
/deep/ .el-table .cell {
  height: 60px; /* 和行高一致 */
  line-height: 60px; /* 垂直居中文本 */

}

.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {

  margin-bottom: 8px !important;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  display: flex;
  justify-content: flex-end; /* 按钮靠右对齐 */
  padding: 10px;
  border-top: 1px solid #ccc; /* 可选：添加分割线 */
}

.confirm-button {
  margin-left: 20px;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.confirm-button:hover {
  background-color: #0056b3;
}

/deep/.el-page-header__content{
  font-size: 15px;
}
</style>
